<template>
  <base-popup :show="show" @close="closeModel(true)">
    <view class="popup">
      <view class="maskContainer couponMask">
        <view class="couponContainer2">
          <view class="title">{{ type === 'redPacket' ? '使用现金红包' : coupontitle }}</view>
          <view v-if="type === 'coupon'" class="coupon-tab">
            <view class="coupon-tab-item" :class="{'active': couponState === 1}" @click="couponState = 1">{{ type === 'redPacket' ? '可用红包' : '可用优惠券' }}({{ couponList.length }})</view>
            <view class="coupon-tab-item" :class="{'active': couponState === 2}" @click="couponState = 2">{{ type === 'redPacket' ? '不可用红包' : '不可用优惠券' }}({{ unusableCouponList.length }})</view>
          </view>
          <view class="coupnItemScroll">
            <view v-if="couponState === 1" class="coupnItemBox">
              <scroll-view scroll-y="true" class="scroll-Y">
                <block v-for="(item, index) in couponList" :key="index">
                  <view class="couponItem" :class="{'couponSelected': nowSelectedCoupon && (type === 'redPacket' ? item.hongbao_id === nowSelectedCoupon.hongbao_id : item.coupon_id === nowSelectedCoupon.coupon_id)}" @click="selectItem(item)">
                    <view class="quota">
                      <view class="o-b"><text class="o-small">¥</text>{{ item.price }}</view>
                      <view v-if="type === 'coupon'" class="o-span">{{ item.standard_price ? `满${item.standard_price}可用` : '无门槛' }}</view>
                    </view>
                    <view class="descripe">
                      <view class="o-p">{{ type === 'redPacket' ? '现金红包' : item.name }}</view>
                      <view v-if="item.use_time_type === 'BY_DAYS' && item.use_days" class="o-span">
                        有效期: 领取后{{ item.use_days }}天内有效
                      </view>
                      <view v-else class="o-span">{{ _parseTime(new Date(item.use_start_time * 1000), '{y}-{m}-{d}') }} - {{ _parseTime(new Date(item.use_stop_time * 1000), '{y}-{m}-{d}') }}</view>
                    </view>
                    <view class="coupnStateBox">
                      <view v-if="nowSelectedCoupon && (type === 'redPacket' ? item.hongbao_id === nowSelectedCoupon.hongbao_id : item.coupon_id === nowSelectedCoupon.coupon_id)" class="coupnState checked">
                      </view>
                      <view v-else class="coupnState">
                      </view>
                    </view>
                  </view>
                </block>
              </scroll-view>
            </view>
            <view v-if="couponState === 2" class="coupnItemBox">
              <scroll-view scroll-y="true" class="scroll-Y">
                <view v-for="item in unusableCouponList" :key="item.coupon_id" class="couponItem unuse">
                  <view class="quota">
                    <view class="o-b"><text class="o-small">¥</text>{{ item.price }}</view>
                    <view class="o-span">{{ item.standard_price ? `满${item.standard_price}可用` : '无门槛' }}</view>
                  </view>
                  <view class="descripe">
                    <view class="o-p">{{ item.name }}</view>
                    <text v-if="item.use_time_type === 'BY_DAYS' && item.use_days" class="o-span">
                      有效期: 领取后{{ item.use_days }}天内有效
                    </text>
                    <text v-else class="o-span">{{ _parseTime(new Date(item.use_start_time * 1000), '{y}-{m}-{d}') }} - {{ _parseTime(new Date(item.use_stop_time * 1000), '{y}-{m}-{d}') }}</text>
                    <view class="o-em" @click="showRule(item)"><view class="span">{{ item.rule ? '使用说明 ' : ` ` }}</view> <view class="span"> <image v-if="item.rule" :src="'/static/images/icon/icon_wh.png'" style="width:20rpx;height:20rpx" />  </view></view>

                  </view>
                  <view class="coupnStateBox">
                    <view class="coupnState">
                      不可用
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
            <view class="fixed">
              <view class="descripe2 unable" style="align-items: center;" @click="closeModel(false)">
                {{ type === 'redPacket' ? '不使用现金红包' : '不使用优惠券' }}
              </view>
              <view class="descripe2" style="align-items: center;" @click="selectCoupon()">
                确认使用
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </base-popup>
</template>

<script>
import BasePopup from '@/components/base/base-popup'
import { parseTime } from '@/utils/tools'
import './index.scss'
export default {
  components: {
    BasePopup
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: () => {
        return 'coupon'
      }
    },
    couponList: {
      type: Array,
      default: () => {
        return []
      }
    },
    unusableCouponList: {
      type: Array,
      default: () => {
        return []
      }
    },
    selectedCoupon: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      coupontitle: '使用优惠券',
      couponState: 1,
      nowSelectedCoupon: null
    }
  },
  watch: {
    show(to) {
      if (to) {
        this.nowSelectedCoupon = this.selectedCoupon
      } else {
        this.nowSelectedCoupon = null
      }
    }
  },
  created() {
    this.nowSelectedCoupon = this.selectedCoupon
  },
  methods: {
    showRule(item) {
      // this.$set(item, 'show', !item.show)
      this.$gc.$message({
        title: '温馨提示',
        content: item.rule,
        confirmText: '我知道了',
        showCancel: false,
        align: 'center'
      })
    },
    _parseTime(time, par) {
      return parseTime(time, par)
    },
    selectItem(item) {
      this.nowSelectedCoupon = item
    },
    selectCoupon(data) {
      this.$emit('selectCoup', { item: this.nowSelectedCoupon, type: this.type })
    },
    closeModel(flag) {
      this.$emit('close', { item: {}, type: this.type, isClose: flag })
    }
  }
}
</script>

